<template>
  <div class="register-box">
    <media :query="{maxWidth: 768}">
      <div class="register-logo">
        <img src="../assets/img/logo.png" alt>
      </div>
    </media>
    <div class="register-title">免费注册</div>
    <div class="register-form">
      <div class="register-field">
        <i class="field-icon field-icon-account"></i>
        <input type="text" v-model.trim="Phone" maxlength="11" placeholder="请输入手机号">
      </div>
      <div class="register-field">
        <i class="field-icon field-icon-img"></i>
        <input type="text" v-model.trim="ImageVerifyCode" placeholder="请输入图形验证码">
        <div class="image-code">
          <img :src="CodeImageSrc" @click="getImageCode" alt="图形码">
        </div>
      </div>
      <div class="register-field">
        <i class="field-icon field-icon-phone"></i>
        <input type="text" v-model.trim="VerifyCode" placeholder="请输入短信验证码">
        <div class="code-btn">
          <button :disabled="CodeBtnDisabled" @click="getVerifyCode">{{CodeBtnText}}</button>
        </div>
      </div>
      <div class="register-field">
        <i class="field-icon field-icon-password"></i>
        <input type="password" v-model="Password" placeholder="请设置登录密码">
      </div>
      <div class="register-field">
        <i class="field-icon field-icon-password"></i>
        <input type="password" v-model="AgainPassword" placeholder="请再次输入密码">
      </div>
      <button class="register-btn" @click="userRegister">注册</button>
      <div class="protocol-agree">
        <van-checkbox v-model="isAgree" shape="square" :label-disabled="true">
          <p>
            <span>我已阅读并同意</span>
            <a class="proticol-link" href="#/protocol">《壹亿互动服务使用协议》</a>
          </p>
        </van-checkbox>
      </div>
      <div class="otherways-login">
        <p class="otherways-title">
          <i></i>
          <span>使用其他方式登录</span>
          <i></i>
        </p>
        <div class="otherways-link">
          <a class="weixin-login" href="javascript:;" @click="weixinLogin"></a>
          <!-- <a class="qq-login" href="javascript:;"></a>
          <a class="sina-login" href="javascript:;"></a>-->
        </div>
        <div class="login-link">
          <p>
            <span>我已有帐号，</span>
            <a href="#/login">我要登录</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery';
import Media from 'vue-media';
export default {
  data() {
    return {
      Phone: '',
      CodeImageSrc: '',
      ImageVerifyCode: '',
      ImageEncryptCode: '',
      VerifyCode: '',
      Password: '',
      AgainPassword: '',
      isAgree: true,
      CodeBtnText: '获取验证码',
      CodeBtnDisabled: false
    };
  },
  components: {
    Media
  },
  created() {
    this.getImageCode();
    console.log(this.$store);
  },
  methods: {
    weixinLogin() {
      let ua = window.navigator.userAgent.toLowerCase();
      if (/iPhone|iPod|Android|ios|SymbianOS|Mobile/i.test(ua)) {
        // 手机端
        window.location.href = `#/qrcode?ReferrerUrl=${window.location.href.split('#')[0]}#/`;
      } else {
        // pc
        window.location.href = `https://open.weixin.qq.com/connect/qrconnect?appid=wx0e89055f8943b237&redirect_uri=${encodeURIComponent(
          window.location.href
        )}&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect`;
      }
    },
    getImageCode() {
      var that = this;
      $.ajax({
        type: 'GET',
        url: that.baseUrl + '/api/register/getImgVerifyCode',
        success: function(res) {
          console.log(res);
          if (res.State) {
            that.CodeImageSrc = res.ImageBase64;
            that.ImageEncryptCode = res.ImageEncryptCode;
          }
        }
      });
    },
    getVerifyCode() {
      if (this.Phone == '') {
        this.$toast('请先输入手机号');
      } else if (/^1[345678]\d{9}$/.test(this.Phone) == false) {
        this.$toast('手机号格式不正确');
      } else if (this.ImageVerifyCode == '') {
        this.$toast('请先输入图形验证码');
      } else {
        var that = this;
        this.CodeBtnDisabled = true;
        $.ajax({
          type: 'POST',
          url: that.baseUrl + '/api/register/getVerifyCode',
          data: {
            Phone: that.Phone,
            ImageEncryptCode: that.ImageEncryptCode,
            VerifyCode: that.ImageVerifyCode
          },
          success: function(res) {
            if (res.State) {
              let second = 120;
              that.CodeBtnText = '还剩' + second + '秒';
              var timer = setInterval(() => {
                second--;
                if (second > 0) {
                  that.CodeBtnText = '还剩' + second + '秒';
                } else {
                  clearInterval(timer);
                  that.CodeBtnDisabled = false;
                  that.CodeBtnText = '发送验证码';
                  second = 120;
                }
              }, 1000);
            } else {
              that.CodeBtnDisabled = false;
              that.$toast(res.Message);
            }
          }
        });
      }
    },
    userRegister() {
      if (/^1[345678]\d{9}$/.test(this.Phone) == false) {
        this.$toast('请输入正确的手机号');
      } else if (this.VerifyCode == '') {
        this.$toast('请输入短信验证码');
      } else if (this.Password == '') {
        this.$toast('请设置登录密码');
      } else if (this.AgainPassword != this.Password) {
        this.$toast('再次输入密码不一致');
      } else {
        var that = this;
        $.ajax({
          type: 'POST',
          url: that.baseUrl + '/api/register/subimt',
          data: {
            Phone: that.Phone,
            VerifyCode: that.VerifyCode,
            Password: that.Password,
            AgainPassword: that.AgainPassword
          },
          success: function(res) {
            if (res.State) {
              that.$cookies.set('token', res.Data, 8 * 60 * 60);
              localStorage.setItem('token', res.Data);
              that.$store.commit('SET_TOKEN', res.Data);
              window.location.href = '#/';
            } else {
              that.$toast.fail('注册失败');
            }
          }
        });
      }
    }
  }
};
</script>

